<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 - 银行客户系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            overflow-x: hidden;
        }

        .app-container {
            display: flex;
            min-height: 100vh;
            width: 100%;
        }

        .sidebar {
            width: 250px;
            background: linear-gradient(to bottom, #1a3a6c, #2c5a8d);
            color: #fff;
            padding: 30px 0;
            flex-shrink: 0;
        }

        .logo-container {
            padding: 0 25px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #1a3a6c;
            font-weight: bold;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 600;
        }

        .user-info {
            display: flex;
            align-items: center;
            padding: 20px 25px;
            gap: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffcc00;
            color: #1a3a6c;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 20px;
        }

        .user-details {
            flex: 1;
        }

        .user-name {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 16px;
        }

        .user-account {
            font-size: 13px;
            opacity: 0.8;
        }

        .sidebar-menu {
            padding: 0 15px;
        }

        .menu-item {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: all 0.2s;
            border-radius: 8px;
            margin-bottom: 8px;
        }

        .menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .menu-item.active {
            background: rgba(255, 255, 255, 0.15);
            border-left: 4px solid #ffcc00;
        }

        .menu-item i {
            font-size: 18px;
            width: 24px;
            text-align: center;
        }

        .menu-text {
            font-size: 15px;
        }

        /* 右侧内容区样式 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }

        .topbar {
            background-color: white;
            padding: 0 30px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid #eee;
            flex-shrink: 0;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #1a3a6c;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .page-title i {
            background-color: #1a3a6c;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .current-time {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        .content-area {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            background-color: #f8fafc;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        /* 修改密码页面样式 */
        .password-change-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .password-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 30px;
            max-width: 600px;
            margin: 0 auto;
            width: 100%;
        }

        .section-title {
            font-size: 20px;
            color: #1a3a6c;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #1a3a6c;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title i {
            color: #1a3a6c;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #1a3a6c;
            font-size: 16px;
        }

        .input-with-icon {
            position: relative;
        }

        .input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
            font-size: 16px;
        }

        .form-input {
            width: 100%;
            padding: 14px 20px 14px 45px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
            outline: none;
        }

        .form-input:focus {
            border-color: #1a3a6c;
            box-shadow: 0 0 0 3px rgba(26, 58, 108, 0.1);
        }

        .password-rules {
            margin-top: 15px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #1a3a6c;
        }

        .rules-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #1a3a6c;
        }

        .rules-list {
            list-style: none;
            padding-left: 5px;
        }

        .rules-list li {
            margin-bottom: 5px;
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .rules-list li i {
            color: #27ae60;
            font-size: 12px;
            margin-top: 5px;
        }

        .btn-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
        }

        .btn-submit {
            background-color: #1a3a6c;
            color: white;
        }

        .btn-submit:hover {
            background-color: #15315a;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(26, 58, 108, 0.3);
        }

        .btn-cancel {
            background-color: #f1f5f9;
            color: #1a3a6c;
            border: 1px solid #ddd;
        }

        .btn-cancel:hover {
            background-color: #e4e9f0;
        }

        .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 8px;
            display: none;
        }

        .success-message {
            color: #27ae60;
            font-size: 16px;
            margin-top: 15px;
            text-align: center;
            padding: 15px;
            background-color: rgba(39, 174, 96, 0.1);
            border-radius: 8px;
            display: none;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .app-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .password-card {
                padding: 20px;
            }
        }

        @media (max-width: 576px) {
            .topbar {
                padding: 0 20px;
                height: 70px;
                flex-direction: column;
                justify-content: center;
                gap: 5px;
            }

            .page-title {
                font-size: 20px;
            }

            .content-area {
                padding: 20px;
            }

            .btn-container {
                flex-direction: column;
                gap: 10px;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }
        }

        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #777;
            cursor: pointer;
            font-size: 16px;
            outline: none;
        }

        /* 数字密码输入框样式 */
        .digit-inputs {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 10px;
        }

        .digit-input {
            width: 50px;
            height: 60px;
            font-size: 28px;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 8px;
            background: white;
            outline: none;
            transition: all 0.2s;
        }

        .digit-input:focus {
            border-color: #1a3a6c;
            box-shadow: 0 0 5px rgba(26, 58, 108, 0.3);
        }

        .digit-container {
            position: relative;
        }

        .digit-container label {
            position: absolute;
            top: -20px;
            left: 0;
            font-size: 12px;
            color: #666;
        }

        /* 移除密码强度指示器 */
        .password-strength {
            display: none;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="logo-container">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-university"></i>
                    </div>
                    <div class="logo-text">银行系统</div>
                </div>
            </div>

            <div class="user-info">
                <div class="avatar" id="user-avatar"></div>
                <div class="user-details">
                    <div class="user-name" id="user-name"></div>
                    <div class="user-account" id="user-account">账号: </div>
                </div>
            </div>

            <div class="sidebar-menu">
                <div class="menu-item" onclick="location.href='../user_home.html';">
                    <i class="fas fa-wallet"></i>
                    <div class="menu-text">账户信息</div>
                </div>
                <div class="menu-item" onclick="location.href='Deposit.html';">
                    <i class="fas fa-money-bill-wave"></i>
                    <div class="menu-text">存款</div>
                </div>
                <div class="menu-item" onclick="location.href='Withdraw money.html';">
                    <i class="fas fa-hand-holding-usd"></i>
                    <div class="menu-text">取款</div>
                </div>
                <div class="menu-item" onclick="location.href='Transfer.html';">
                    <i class="fas fa-exchange-alt"></i>
                    <div class="menu-text">转账</div>
                </div>
                <div class="menu-item" onclick="location.href='AccountLost.html';">
                    <i class="fas fa-lock"></i>
                    <div class="menu-text">账户挂失</div>
                </div>
                <div class="menu-item active">
                    <i class="fas fa-key"></i>
                    <div class="menu-text">修改密码</div>
                </div>
                <div class="menu-item" onclick="location.href='TransactionRecords.html';">
                    <i class="fas fa-history"></i>
                    <div class="menu-text">交易记录</div>
                </div>
                <div class="menu-item" id="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <div class="menu-text">安全退出</div>
                </div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="main-content">
            <div class="topbar">
                <div class="page-title">
                    <i class="fas fa-key"></i>
                    <span>修改密码</span>
                </div>
                <div class="current-time" id="current-time"></div>
            </div>

            <div class="content-area">
                <div class="password-change-container">
                    <!-- 修改密码卡片 -->
                    <div class="password-card">
                        <h2 class="section-title">
                            <i class="fas fa-lock"></i>修改账户密码
                        </h2>

                        <form id="password-change-form">
                            <!-- 旧密码输入区域 -->
                            <div class="form-group">
                                <label class="form-label">旧密码</label>
                                <div class="input-with-icon">
                                    <i class="fas fa-lock"></i>
                                    <input type="password" id="old-password" class="form-input" placeholder="请输入6位数字密码" required
                                           maxlength="6" pattern="\d{6}" title="请输入6位数字">
                                    <button type="button" class="toggle-password" onclick="togglePassword('old-password', this)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="error-message" id="old-password-error"></div>
                            </div>

                            <!-- 新密码输入区域-->
                            <div class="form-group">
                                <label class="form-label">新密码</label>
                                <div class="digit-container">
                                    <div class="digit-inputs" id="new-password-container">
                                        <input type="password" class="digit-input" maxlength="1" data-index="0">
                                        <input type="password" class="digit-input" maxlength="1" data-index="1">
                                        <input type="password" class="digit-input" maxlength="1" data-index="2">
                                        <input type="password" class="digit-input" maxlength="1" data-index="3">
                                        <input type="password" class="digit-input" maxlength="1" data-index="4">
                                        <input type="password" class="digit-input" maxlength="1" data-index="5">
                                    </div>
                                    <input type="hidden" id="new-password">
                                </div>
                                <div class="error-message" id="new-password-error"></div>
                            </div>

                            <!-- 确认新密码区域-->
                            <div class="form-group">
                                <label class="form-label">确认新密码</label>
                                <div class="digit-container">
                                    <div class="digit-inputs" id="confirm-password-container">
                                        <input type="password" class="digit-input" maxlength="1" data-index="0">
                                        <input type="password" class="digit-input" maxlength="1" data-index="1">
                                        <input type="password" class="digit-input" maxlength="1" data-index="2">
                                        <input type="password" class="digit-input" maxlength="1" data-index="3">
                                        <input type="password" class="digit-input" maxlength="1" data-index="4">
                                        <input type="password" class="digit-input" maxlength="1" data-index="5">
                                    </div>
                                    <input type="hidden" id="confirm-password">
                                </div>
                                <div class="error-message" id="confirm-password-error"></div>
                            </div>

                            <!-- 密码规则提示 -->
                            <div class="password-rules">
                                <div class="rules-title">密码设置规则：</div>
                                <ul class="rules-list">
                                    <li><i class="fas fa-check-circle"></i>密码必须为6位纯数字</li>
                                    <li><i class="fas fa-check-circle"></i>不能与旧密码相同</li>
                                </ul>
                            </div>

                            <!-- 成功提示 -->
                            <div class="success-message" id="success-message">
                                <i class="fas fa-check-circle"></i> 密码修改成功！请重新登录
                            </div>

                            <!-- 按钮区域 -->
                            <div class="btn-container">
                                <button type="submit" class="btn btn-submit">
                                    <i class="fas fa-check"></i>确认修改
                                </button>
                                <button type="button" class="btn btn-cancel" onclick="clearForm()">
                                    <i class="fas fa-times"></i>取消
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    // 用户信息处理函数
    function renderUserInfo() {
        const cardID = sessionStorage.getItem('cardID');
        const userName = sessionStorage.getItem('userName');

        if (!cardID) {
            alert('请先登录系统');
            window.location.href = '../login.html';
            return;
        }

        const formattedCardID = cardID.replace(/(\d{4})(?=\d)/g, '$1 ');
        document.getElementById('user-account').textContent = `账号: ${formattedCardID}`;
        document.getElementById('user-name').textContent = userName;
        document.getElementById('user-avatar').textContent = userName.charAt(0);
    }

    // 更新时间显示
    function updateTime() {
        const now = new Date();
        const options = {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        };
        document.getElementById('current-time').textContent = now.toLocaleDateString('zh-CN', options);
    }

    // 密码验证（6位数字）
    function validatePassword(newPassword, confirmPassword, oldPassword) {
        let isValid = true;

        // 验证新密码格式
        if (!/^\d{6}$/.test(newPassword)) {
            document.getElementById('new-password-error').textContent = '密码必须是6位数字';
            document.getElementById('new-password-error').style.display = 'block';
            isValid = false;
        }

        // 验证两次输入是否一致
        if (newPassword !== confirmPassword) {
            document.getElementById('confirm-password-error').textContent = '两次输入的密码不一致';
            document.getElementById('confirm-password-error').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('confirm-password-error').style.display = 'none';
        }

        // 验证新密码与旧密码是否相同
        if (newPassword === oldPassword) {
            document.getElementById('new-password-error').textContent = '新密码不能与旧密码相同';
            document.getElementById('new-password-error').style.display = 'block';
            isValid = false;
        }

        return isValid;
    }

    // 切换密码可见性
    function togglePassword(inputId, button) {
        const input = document.getElementById(inputId);
        const icon = button.querySelector('i');

        if (input.type === 'password') {
            input.type = 'text';
            icon.className = 'fas fa-eye-slash';
        } else {
            input.type = 'password';
            icon.className = 'fas fa-eye';
        }
    }

    // 清除表单
    function clearForm() {
        document.getElementById('password-change-form').reset();
        document.querySelectorAll('.digit-input').forEach(input => {
            input.value = '';
        });

        // 隐藏所有错误信息
        document.querySelectorAll('.error-message').forEach(el => {
            el.style.display = 'none';
        });

        document.getElementById('success-message').style.display = 'none';
    }

    // 提交表单
    async function submitPasswordChange(e) {
        e.preventDefault();

        const oldPassword = document.getElementById('old-password').value;

        // 获取新密码的值
        const newPasswordInputs = document.querySelectorAll('#new-password-container .digit-input');
        let newPasswordValue = '';
        newPasswordInputs.forEach(input => {
            newPasswordValue += input.value;
        });

        // 获取确认密码的值
        const confirmPasswordInputs = document.querySelectorAll('#confirm-password-container .digit-input');
        let confirmPasswordValue = '';
        confirmPasswordInputs.forEach(input => {
            confirmPasswordValue += input.value;
        });

        const submitBtn = document.querySelector('.btn-submit');
        const originalBtnText = submitBtn.innerHTML;

        // 验证表单
        if (!validatePassword(newPasswordValue, confirmPasswordValue, oldPassword)) {
            return;
        }

        // 显示加载状态
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
        submitBtn.disabled = true;

        try {
            // 发送修改密码请求
            const isChangeSuccess = await updatePassword(oldPassword, newPasswordValue);

            if (!isChangeSuccess) {
                throw new Error('密码修改失败');
            }

            // 显示成功消息
            document.getElementById('success-message').style.display = 'block';

            // 重置表单
            setTimeout(() => {
                clearForm();
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;

                // 自动跳转到登录页面
                setTimeout(() => {
                    alert('密码修改成功，请重新登录');
                    sessionStorage.removeItem('cardID');
                    sessionStorage.removeItem('userName');
                    window.location.href = '../login.html';
                }, 2000);
            }, 2000);

        } catch (error) {
            console.error('修改密码出错:', error);
            document.getElementById('old-password-error').textContent = error.message || '密码修改失败，请重试';
            document.getElementById('old-password-error').style.display = 'block';
            submitBtn.innerHTML = originalBtnText;
            submitBtn.disabled = false;
        }
    }

    // 更新密码函数
    async function updatePassword(oldPassword, newPassword) {
        const cardID = sessionStorage.getItem('cardID');

        // 构造URL查询参数
        const params = new URLSearchParams({
            cardID: cardID,
            oldPassword: oldPassword,
            newPassword: newPassword
        });

        const url = `http://localhost:8080/customer/updatePasswordBypPass?${params.toString()}`;

        try {
            // 发送GET请求到后端API
            const response = await fetch(url, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error(`服务器错误: ${response.status}`);
            }

            const result = await response.json();

            if (result.code === '200') {
                return true;
            } else {
                // 根据不同的错误代码返回具体的错误信息
                let errorMessage = '密码修改失败';
                switch(result.code) {
                    case '401':
                        errorMessage = '旧密码不正确';
                        break;
                    case '402':
                        errorMessage = '新密码格式错误';
                        break;
                    case '403':
                        errorMessage = '新密码不能与旧密码相同';
                        break;
                    case '404':
                        errorMessage = '用户不存在';
                        break;
                }
                throw new Error(errorMessage);
            }

        } catch (error) {
            console.error('更新密码出错:', error);
            throw new Error(error.message || '网络请求失败');
        }
    }

    // 数字输入框处理逻辑
    function setupDigitInputs() {
        const inputs = document.querySelectorAll('.digit-input');

        inputs.forEach(input => {
            // 处理输入
            input.addEventListener('input', function() {
                const index = parseInt(this.dataset.index);

                // 如果输入了一个数字，自动聚焦到下一个输入框
                if (this.value.length === 1 && index < 5) {
                    const nextInput = this.parentElement.querySelector(`.digit-input[data-index="${index + 1}"]`);
                    if (nextInput) nextInput.focus();
                }
            });

            // 处理退格键
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Backspace' && this.value === '' && parseInt(this.dataset.index) > 0) {
                    const prevInput = this.parentElement.querySelector(`.digit-input[data-index="${parseInt(this.dataset.index) - 1}"]`);
                    if (prevInput) prevInput.focus();
                }
            });

            // 限制只能输入数字
            input.addEventListener('keypress', function(e) {
                const charCode = e.which ? e.which : e.keyCode;
                if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                    e.preventDefault();
                }
            });

            // 防止粘贴
            input.addEventListener('paste', function(e) {
                e.preventDefault();
            });
        });
    }

    // 退出登录
    function setupLogoutButton() {
        document.getElementById('logout-btn').addEventListener('click', function() {
            if(confirm('确定要退出系统吗？')) {
                sessionStorage.removeItem('cardID');
                sessionStorage.removeItem('userName');
                window.location.href = '../login.html';
            }
        });
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', function () {
        renderUserInfo();
        updateTime();

        // 每秒更新一次时间
        setInterval(updateTime, 1000);

        // 设置数字输入框行为
        setupDigitInputs();

        // 表单提交事件
        document.getElementById('password-change-form').addEventListener('submit', submitPasswordChange);

        // 设置退出按钮
        setupLogoutButton();
    });
    </script>
</body>
</html>